<template>
    <div class="workbench">
        <div class="lg:flex">
            <el-card class="!border-none mb-4 flex-1 p-4" shadow="never">
                <template #header>
                    <div class="mb-6 lg:flex">
                        <div class="card-title mr-2.5">实时数据</div>
                        <div class="text-tx-secondary text-xs flex items-center">
                            更新时间：{{ appStore.realData.latest_update_time }}
                        </div>
                    </div>
                </template>

                <div class="flex flex-wrap justify-between">
                    <div class=" md:w-1/5">
                        <div class="leading-2.5">渠道数量</div>
                            <div class="text-4xl font-semibold">{{ appStore.realData.channel_num }}
                        </div>
                    </div>
                    <div class=" md:w-1/5">
                        <div class="leading-2.5">产品数量</div>
                            <div class="text-4xl font-semibold">{{ appStore.realData.product_num }}
                        </div>
                    </div>
                    <div class=" md:w-1/5">
                        <div class="leading-2.5">服务商数量</div>
                            <div class="text-4xl font-semibold">{{ appStore.realData.server_num }}
                        </div>
                    </div>
                    <div class=" md:w-1/5">
                        <div class="leading-2.5">进行中合作</div>
                            <div class="text-4xl font-semibold">{{ appStore.realData.cooperation_ing_num }}
                        </div>
                    </div>
                    <div class=" md:w-1/5">
                        <div class="leading-2.5">已完结合作</div>
                            <div class="text-4xl font-semibold">{{ appStore.realData.cooperation_done_num }}
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <div class="lg:flex justify-between">
            <el-card class="!border-none mb-4 p-4 nav" shadow="never">
                <template #header>
                    <div class="mb-6 lg:flex justify-between">
                        <div class="card-title">合作统计</div>
                        <div class="lg:flex">
                            <div class="mr-2.5">
                                <el-radio-group v-model="one" @change="onChangeOne">
                                    <el-radio-button :label="0">天</el-radio-button>
                                    <el-radio-button :label="1">月</el-radio-button>
                                </el-radio-group>
                            </div>
                            <div class="block">
                                <el-date-picker
                                    v-if="one"
                                    v-model="oneDate"
                                    type="month"
                                    placeholder="请选择日期"
                                    format="YYYY-MM"
                                    value-format="YYYY-MM-DD"
                                    :clearable="false"
                                    @change="changeOneDate"
                                />
                                <el-date-picker
                                    v-else
                                    v-model="oneDate"
                                    type="date"
                                    placeholder="请选择日期"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    :clearable="false"
                                    @change="changeOneDate"
                                />
                            </div>
                        </div>
                    </div>
                </template>

                <div class="flex flex-wrap justify-around">
                    <div class=" md:w-1/4">
                        <div class="leading-2.5">达成合作</div>
                            <div class="text-4xl font-semibold">{{ one_data.cooperation_confirm_num }}
                        </div>
                    </div>
                    <div class=" md:w-1/4">
                        <div class="leading-2.5">完结合作</div>
                            <div class="text-4xl font-semibold">{{ one_data.cooperation_done_num }}
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="!border-none mb-4 p-4 nav" shadow="never">
                <template #header>
                    <div class="mb-6 lg:flex justify-between">
                        <div class="card-title">需求统计</div>
                        <div class="lg:flex">
                            <div class="mr-2.5">
                                <el-radio-group v-model="two" @change="onChangeTwo">
                                    <el-radio-button :label="0">天</el-radio-button>
                                    <el-radio-button :label="1">月</el-radio-button>
                                </el-radio-group>
                            </div>
                            <div class="block">
                                <el-date-picker
                                    v-if="two"
                                    v-model="twoDate"
                                    type="month"
                                    placeholder="请选择日期"
                                    format="YYYY-MM"
                                    value-format="YYYY-MM-DD"
                                    :clearable="false"
                                    @change="changeTwoDate"
                                />
                                <el-date-picker
                                    v-else
                                    v-model="twoDate"
                                    type="date"
                                    placeholder="请选择日期"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    :clearable="false"
                                    @change="changeTwoDate"
                                />
                            </div>
                        </div>
                    </div>
                </template>

                <div class="flex flex-wrap justify-around">
                    <div class=" md:w-1/4">
                        <div class="leading-2.5">发布需求</div>
                            <div class="text-4xl font-semibold">{{ two_data.demand_publish_num }}
                        </div>
                    </div>
                    <div class=" md:w-1/4">
                        <div class="leading-2.5">完结需求</div>
                            <div class="text-4xl font-semibold">{{ two_data.demand_done_num }}
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <div class="lg:flex justify-between">
            <div class="nav">
                <el-card class="!border-none mb-4 p-4" shadow="never">
                    <template #header>
                        <div class="mb-6 lg:flex justify-between">
                            <div class="card-title">财务统计</div>
                            <div class="lg:flex">
                                <div class="mr-2.5">
                                    <el-radio-group v-model="three" @change="onChangeThree">
                                        <el-radio-button :label="0">天</el-radio-button>
                                        <el-radio-button :label="1">月</el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div class="block">
                                    <el-date-picker
                                        v-if="three"
                                        v-model="threeDate"
                                        type="month"
                                        placeholder="请选择日期"
                                        format="YYYY-MM"
                                        value-format="YYYY-MM-DD"
                                        :clearable="false"
                                        @change="changeThreeDate"
                                    />
                                    <el-date-picker
                                        v-else
                                        v-model="threeDate"
                                        type="date"
                                        placeholder="请选择日期"
                                        format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD"
                                        :clearable="false"
                                        @change="changeThreeDate"
                                    />
                                </div>
                            </div>
                        </div>
                    </template>

                    <div class="flex flex-wrap justify-around">
                        <div class=" md:w-1/4">
                            <div class="leading-2.5">渠道费</div>
                                <div class="text-4xl font-semibold">{{ three_data.channel_fee }}
                            </div>
                        </div>
                        <div class=" md:w-1/4">
                            <div class="leading-2.5">平台服务费</div>
                                <div class="text-4xl font-semibold">{{ three_data.city_plat_fee }}
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="!border-none mb-4 p-4" shadow="never">
                    <template #header>
                        <div class="mb-6 lg:flex justify-between">
                            <div class="card-title">渠道排行榜</div>
                            <div class="lg:flex">
                                <div class="mr-2.5">
                                    <el-radio-group v-model="five" @change="onChangeFive">
                                        <el-radio-button :label="0">天</el-radio-button>
                                        <el-radio-button :label="1">月</el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div class="block">
                                    <el-date-picker
                                        v-if="five"
                                        v-model="fiveDate"
                                        type="month"
                                        placeholder="请选择日期"
                                        format="YYYY-MM"
                                        value-format="YYYY-MM-DD"
                                        :clearable="false"
                                        @change="changeFiveDate"
                                    />
                                    <el-date-picker
                                        v-else
                                        v-model="fiveDate"
                                        type="date"
                                        placeholder="请选择日期"
                                        format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD"
                                        :clearable="false"
                                        @change="changeFiveDate"
                                    />
                                </div>
                            </div>
                        </div>
                    </template>
                    <el-table :data="five_data" style="width: 100%">
                        <el-table-column type="index" width="120" />
                        <el-table-column prop="real_name" label="渠道名称" width="280" />
                        <el-table-column prop="num" label="达成合作数" />
                    </el-table>
                </el-card>
            </div>
            <div class="nav">
                <div class="emtry"></div>

                <el-card class="!border-none mb-4 p-4" shadow="never">
                    <template #header>
                        <div class="mb-6 lg:flex justify-between">
                            <div class="card-title">产品排行榜</div>
                            <div class="lg:flex">
                                <div class="mr-2.5">
                                    <el-radio-group v-model="four" @change="onChangeFour">
                                        <el-radio-button :label="0">天</el-radio-button>
                                        <el-radio-button :label="1">月</el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div class="block">
                                    <el-date-picker
                                        v-if="four"
                                        v-model="fourDate"
                                        type="month"
                                        placeholder="请选择日期"
                                        format="YYYY-MM"
                                        value-format="YYYY-MM-DD"
                                        :clearable="false"
                                         @change="changeFourDate"
                                    />
                                    <el-date-picker
                                        v-else
                                        v-model="fourDate"
                                        type="date"
                                        placeholder="请选择日期"
                                        format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD"
                                        :clearable="false"
                                         @change="changeFourDate"
                                    />
                                </div>
                            </div>
                        </div>
                    </template>
                    <el-table :data="four_data" style="width: 100%">
                        <el-table-column type="index" label="排名" width="120" />
                        <el-table-column prop="name" label="渠道名称" width="280" />
                        <el-table-column prop="num" label="达成合作数" />
                    </el-table>
                </el-card>
            </div>
        </div>

        
        <!-- Echart数据图表 -->
        <div class="md:flex justify-between w-full">
            <div class="md:flex flex-width nav">
                <el-card class="flex-1 !border-none mb-4 p-4" shadow="never">
                    <template #header>
                        <div class="mb-2.5 md:flex justify-between">
                            <div class="card-title">新增有效渠道<span class="all-count">总计：1000</span></div>
                            <div class="md:flex">
                                <el-radio-group v-model="channelIndex" class="mr-2.5">
                                    <el-radio-button label="1">月</el-radio-button>
                                </el-radio-group>
                                <el-date-picker
                                    class="w-20"
                                    v-model="channelDate"
                                    type="month"
                                    placeholder="请选择日期"
                                    format="YYYY-MM"
                                    value-format="YYYY-MM-DD"
                                    :clearable="false"
                                    @change="channelChange"
                                />
                            </div>
                        </div>
                    </template>
                    <div>
                        <v-charts
                            ref="vueChart"
                            :style="{height: `${isPc?280:175}px`}"
                            :option="workbenchData.visitorOption"
                            :autoresize="true"
                        />
                    </div>
                </el-card>
            </div>
            <div class="md:flex flex-width nav">
                <el-card class="flex-1 !border-none mb-4 p-4" shadow="never">
                    <template #header>
                        <div class="mb-2.5 md:flex justify-between">
                            <div class="card-title">新增有效注册用户<span class="all-count">总计：1000</span></div>
                            <div class="md:flex">
                                <el-radio-group v-model="userIndex" class="mr-2.5">
                                    <el-radio-button label="1">月</el-radio-button>
                                </el-radio-group>
                                <el-date-picker
                                    class="w-20"
                                    v-model="userDate"
                                    type="month"
                                    placeholder="请选择日期"
                                    format="YYYY-MM"
                                    value-format="YYYY-MM-DD"
                                    :clearable="false"
                                    @change="userChange"
                                />
                            </div>
                        </div>
                    </template>
                    <div>
                        <v-charts
                            ref="vueChartRight"
                            :style="{height: `${isPc?280:175}px`}"
                            :option="workbenchData.userOption"
                            :autoresize="true"
                        />
                    </div>
                </el-card>
            </div>
        </div>
        
    </div>
</template>

<script lang="ts" setup name="workbench">
import { getWorkbench, statisticCooperation, statisticDemand, statisticFinance, statisticProductRank, statisticChannelRank, statisticChannel, statisticUser } from '@/api/app'
import useAppStore from '@/stores/modules/app'
const appStore = useAppStore()
import vCharts from 'vue-echarts'
const vueChart = ref();
const vueChartRight = ref()

const isPc = ref(true)

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();

// 日 月 控制
const one = ref(1)
const two = ref(1)
const three = ref(1)
const four = ref(1)
const five = ref(1)

// 选择的日期
const oneDate = ref()
const twoDate = ref()
const threeDate = ref()
const fourDate = ref()
const fiveDate = ref()
//有效渠道日期
const channelIndex = ref(1)
const channelDate = ref();
const userIndex = ref(1)
const userDate = ref();

// 初始化筛选日期
oneDate.value = `${year}-${month < 10 ? 0 : ''}${month}-${day}`;
twoDate.value = `${year}-${month < 10 ? 0 : ''}${month}-${day}`;
threeDate.value = `${year}-${month < 10 ? 0 : ''}${month}-${day}`;
fourDate.value = `${year}-${month < 10 ? 0 : ''}${month}-${day}`;
fiveDate.value = `${year}-${month < 10 ? 0 : ''}${month}-${day}`;
channelDate.value = `${year}-${month < 10 ? 0 : ''}${month}-${day}`;
userDate.value = `${year}-${month < 10 ? 0 : ''}${month}-${day}`;
// ==========================================
// 天/日切换
const onChangeOne = (e:any) => {
    getOne();
}
// 两个共用一个日期的选择
const changeOneDate = (e:any) => {
    getOne();
}
const one_data:any = ref({})
const getOne = async () => {
    let params = {
        start_time: '',
        end_time: ''
    }
    // 判断是日还是月
    if (one.value) {
        let arr = oneDate.value.split('-');
        let day = new Date(arr[0], arr[1], 0).getDate();
        params.start_time = `${arr[0]}-${arr[1]}-01`;
        params.end_time = `${arr[0]}-${arr[1]}-${day}`;
    } else {
        params.start_time = oneDate.value;
        params.end_time = oneDate.value;
    }
    const res = await statisticCooperation(params)
    one_data.value = res;
}
getOne();
// ==========================================
// 天/日切换
const onChangeTwo = (e:any) => {
    getTwo();
}
// 两个共用一个日期的选择
const changeTwoDate = (e:any) => {
    getTwo();
}
const two_data:any = ref({})
const getTwo = async () => {
    let params = {
        start_time: '',
        end_time: ''
    }
    // 判断是日还是月
    if (two.value) {
        let arr = twoDate.value.split('-');
        let day = new Date(arr[0], arr[1], 0).getDate();
        params.start_time = `${arr[0]}-${arr[1]}-01`;
        params.end_time = `${arr[0]}-${arr[1]}-${day}`;
    } else {
        params.start_time = twoDate.value;
        params.end_time = twoDate.value;
    }
    const res = await statisticDemand(params)
    two_data.value = res;
}
getTwo();
// ==========================================
// 天/日切换
const onChangeThree = (e:any) => {
    getThree();
}
// 两个共用一个日期的选择
const changeThreeDate = (e:any) => {
    getThree();
}
const three_data:any = ref({})
const getThree = async () => {
    let params = {
        start_time: '',
        end_time: ''
    }
    // 判断是日还是月
    if (three.value) {
        let arr = threeDate.value.split('-');
        let day = new Date(arr[0], arr[1], 0).getDate();
        params.start_time = `${arr[0]}-${arr[1]}-01`;
        params.end_time = `${arr[0]}-${arr[1]}-${day}`;
    } else {
        params.start_time = threeDate.value;
        params.end_time = threeDate.value;
    }
    const res = await statisticFinance(params)
    three_data.value = res;
}
getThree();
// ==========================================
// 天/日切换
const onChangeFour = (e:any) => {
    getFour();
}
// 两个共用一个日期的选择
const changeFourDate = (e:any) => {
    getFour();
}
const four_data:any = ref([])
const getFour = async () => {
    let params = {
        start_time: '',
        end_time: ''
    }
    // 判断是日还是月
    if (four.value) {
        let arr = fourDate.value.split('-');
        let day = new Date(arr[0], arr[1], 0).getDate();
        params.start_time = `${arr[0]}-${arr[1]}-01`;
        params.end_time = `${arr[0]}-${arr[1]}-${day}`;
    } else {
        params.start_time = fourDate.value;
        params.end_time = fourDate.value;
    }
    const res = await statisticProductRank(params)
    four_data.value = res.return_data || [];
}
getFour();
// ==========================================
// 天/日切换
const onChangeFive = (e:any) => {
    getFive();
}
// 两个共用一个日期的选择
const changeFiveDate = (e:any) => {
    getFive();
}
const five_data:any = ref([])
const getFive = async () => {
    let params = {
        start_time: '',
        end_time: ''
    }
    // 判断是日还是月
    if (four.value) {
        let arr = fiveDate.value.split('-');
        let day = new Date(arr[0], arr[1], 0).getDate();
        params.start_time = `${arr[0]}-${arr[1]}-01`;
        params.end_time = `${arr[0]}-${arr[1]}-${day}`;
    } else {
        params.start_time = fiveDate.value;
        params.end_time = fiveDate.value;
    }
    const res = await statisticChannelRank(params)
    five_data.value = res.return_data || [];
}
getFive();
// ==========================================
// 月份开始和结束的渲染
const generateDateRange = (startDate:any, endDate:any) => {
    let dateArray = [];
    let currentDate = new Date(startDate);
    let endDateObj = new Date(endDate);
 
    // 确保循环在到达结束日期之前停止（包括结束日期）
    while (currentDate <= endDateObj) {
        // 使用 toISOString().split('T')[0] 来格式化日期为 YYYY-MM-DD
        dateArray.push(currentDate.toISOString().split('T')[0]);
        // 增加一天
        currentDate.setDate(currentDate.getDate() + 1);
    }
 
    return dateArray;
}
// ==========================================
// 新增有效渠道数据
const channelChange = (e:any) => {
    getChannel()
}
const channel_data = ref({})
const getChannel = async () => {
    let params = {
        start_time: '',
        end_time: ''
    }
    let arr = channelDate.value.split('-');
    let day = new Date(arr[0], arr[1], 0).getDate();
    params.start_time = `${arr[0]}-${arr[1]}-01`;
    params.end_time = `${arr[0]}-${arr[1]}-${day}`;
    let arr_date = generateDateRange(params.start_time, params.end_time);
    const res = await statisticChannel(params)
    console.log(res)
    let newArr:any = []
    let dateArr:any = []
    arr_date.map((item) => {
        let obj = {
            date: item,
            total_count: 0,
            index: 0,
            value: 0
        }
        res.return_data.map((itemC: any, index: number) => {
            if (item == itemC.date) {
                obj.total_count = itemC.total_count;
                obj.index = index + 1;
                obj.value = itemC.total_count;
            }
        })
        newArr.push(obj)
        dateArr.push(obj.date.split('-')[2])
    })
    console.log(newArr)
    channel_data.value = newArr;
    workbenchData.visitorOption.xAxis.data = []
    workbenchData.visitorOption.series[0].data = []

    workbenchData.visitorOption.xAxis.data = dateArr
    workbenchData.visitorOption.series[0].data = newArr
}
// ==========================================
// 新增有效注册用户数据
const userChange = (e:any) => {
    getUser()
}
const user_data = ref({})
const getUser = async () => {
    let params = {
        start_time: '',
        end_time: ''
    }
    let arr = userDate.value.split('-');
    let day = new Date(arr[0], arr[1], 0).getDate();
    params.start_time = `${arr[0]}-${arr[1]}-01`;
    params.end_time = `${arr[0]}-${arr[1]}-${day}`;
    let arr_date = generateDateRange(params.start_time, params.end_time);
    const res = await statisticUser(params)
    console.log(res)
    let newArr:any = []
    let dateArr:any = []
    arr_date.map((item) => {
        let obj = {
            date: item,
            total_count: 0,
            index: 0,
            value: 0
        }
        res.return_data.map((itemC: any, index: number) => {
            if (item == itemC.date) {
                obj.total_count = itemC.total_count;
                obj.index = index + 1;
                obj.value = itemC.total_count;
            }
        })
        newArr.push(obj)
        dateArr.push(obj.date.split('-')[2])
    })
    console.log(newArr)
    user_data.value = newArr;
    workbenchData.userOption.xAxis.data = []
    workbenchData.userOption.series[0].data = []

    workbenchData.userOption.xAxis.data = dateArr
    workbenchData.userOption.series[0].data = newArr
}
// ==========================================

// 表单数据
const workbenchData: any = reactive({
    visitorOption: {
        xAxis: {
            type: 'category',
            data: [0]
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            show: true,
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            itemHeight: 3,
            bottom: '0',
            // data: ['新增注册用户数', '新增小程序注册数', '新增APP注册数']
            data: ['新增有效渠道']
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis',
            confine: true,
            backgroundColor: 'rgba(255,255,255,1)',
            textStyle: {
                color: '#333333'
            },
            label:{
               
            },
            formatter: (params: any) => {
                // console.log(params)
                return `${params[0].data.date}</br>
                        ${params[0].marker}${params[0].seriesName}&nbsp;&nbsp;&nbsp;   ${params[0].value}</br>`
            },
        },
        grid: {
            left: "6%",
            top: "10%",
            right: "3%",
            bottom: "15%",
        },

        dataZoom:[],
        series: [
            {
                name: '新增有效渠道',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: { color: '#809BF3' }
            },
        ]
    },
    userOption: {
        xAxis: {
            type: 'category',
            data: [0]
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            show: true,
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            itemHeight: 3,
            bottom: '0',
            // data: ['新增注册用户数', '新增小程序注册数', '新增APP注册数']
            data: ['新增有效用户']
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis',
            confine: true,
            backgroundColor: 'rgba(255,255,255,1)',
            textStyle: {
                color: '#333333'
            },
            label:{
               
            },
            formatter: (params: any) => {
                // console.log(params)
                return `${params[0].data.date}</br>
                        ${params[0].marker}${params[0].seriesName}&nbsp;&nbsp;&nbsp;   ${params[0].value}</br>`
            },
        },
        grid: {
            left: "6%",
            top: "10%",
            right: "3%",
            bottom: "15%",
        },

        dataZoom:[],
        series: [
            {
                name: '新增有效用户',
                data: [0],
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: { color: '#809BF3' }
            },
        ]
    }
})

// 判断是否是手机端
const isMobile = () => {
    const userAgentInfo = navigator.userAgent;
    const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
     const mobileFlag = mobileAgents.some((mobileAgent) => {
        return userAgentInfo.indexOf(mobileAgent) > 0;
    });

    return mobileFlag;
}

onMounted(() => {
    if (isMobile()) {
        // 移动端的图表变化
        isPc.value = false;
        workbenchData.visitorOption.dataZoom = [
            {
                type: 'slider',
                show: false,
                start: 0,
                end: 25,
                handleSize: 8,
                handleColor: {
                    color: '#DCE2E8'
                },
                xAxisIndex: [0],
                filterMode: 'filter'
            },
            {
                zoomOnMouseWheel: false,
                type: "inside",
            },
        ];
        workbenchData.visitorOption.grid = {
            left: "12%",
            top: "10%",
            right: "3%",
            bottom: "12%",
        }
        workbenchData.visitorOption.tooltip.backgroundColor = 'rgba(74, 70, 67, 1)';
        workbenchData.visitorOption.tooltip.textStyle.color = '#FFFFFF';
        workbenchData.visitorOption.legend.show = false;
        //=========================================================
        workbenchData.userOption.dataZoom = [
            {
                type: 'slider',
                show: false,
                start: 0,
                end: 25,
                handleSize: 8,
                handleColor: {
                    color: '#DCE2E8'
                },
                xAxisIndex: [0],
                filterMode: 'filter'
            },
            {
                zoomOnMouseWheel: false,
                type: "inside",
            },
        ];
        workbenchData.userOption.grid = {
            left: "12%",
            top: "10%",
            right: "3%",
            bottom: "12%",
        }
        workbenchData.userOption.tooltip.backgroundColor = 'rgba(74, 70, 67, 1)';
        workbenchData.userOption.tooltip.textStyle.color = '#FFFFFF';
        workbenchData.userOption.legend.show = false;
    }
    // getData()
    getChannel()
    getUser()
})
</script>

<style lang="scss" scoped>
.workbench{
    ::v-deep .el-card__header{
        border: none;
        padding: 0;
    }
    ::v-deep .el-card__body{
        border: none;
        padding: 0;
    }
    ::v-deep .el-input__wrapper{
        width: 100%;
    }
    ::v-deep .el-table th{
        background-color: #FFFFFF !important;
    }
    .flex-width{
        width: 49%;
    }
    .all-count{
        font-weight: 400;
        margin-left: 30px;
    }
    .no-pb{
        ::v-deep .el-card__header{
            padding-bottom: 0;
       
        }
    }
    .card-title{
        // font-size: 12px;
        color: #171717;
        font-weight: bold;
        line-height: 32px;
    }
    .text-circle{
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%; 
        background: #FF6900;
    }
    .up{
       color: #13D897; 
    }
    .down{
        color: #D81313;
    }
    .nav{
        width: 49.5% !important;
    }
    @media (max-width: 575px) {
        .nav {
            width: 100% !important;
        }
    }
    .tab-btn{
        background: #FFFFFF;
        color: #666666;
        border: 1px solid #DBD9D9;
        text-align: center;
        cursor: pointer;
    }
    .tab-active{
        background: #FF6900;
        color: #FFFFFF;
        border:none;
    }
    .tip{
        background: #FAFAFA;
        color: #666666;
    }
    .emtry{
        height: 145px;
        margin-bottom: 16px;
    }
}

</style>
